<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<nav id="navbar">
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
<div id="container"></div>

<script>
  document.querySelector('#navbar').addEventListener('click', e => {
    let target  = e.target;
    if (target.tagName === 'A') {
      e.preventDefault();//阻止a标签跳转的默认事件
      history.pushState({}, "", target.href);//去指定地址
      findHistory();
    }
  })

  //构建路由表
  let historyList = [
    {
      path:'/',
      component:'首页'
    },
    {
      path:'/about',
      component:'about'
    },
    {
      path:'/contact',
      component:'contact'
    }
  ]

  const findHistory = ()=>{
    let pathName =  location.pathname;//获取路由地址
   document.querySelector('#container').innerText = historyList.filter(v=>v.path===pathName).map(v => v.component);
  }

  history.pushState({},null,'/');
  findHistory();

  //对于go,forward,back等方法触发监听，但是对于pushState方法不反应
  window.onpopstate = findHistory;


</script>
</body>

</html>